<!DOCTYPE html>
<meta charset="UTF-8">
<div style="padding: 10px; height: 500px;">
	<table id="dg_clientpagination" title="客户端分页" style="width: 700px; height: 300px"
		data-defs="border:true,ptborder:false,
				rownumbers:true,
				singleSelect:true,
				autoRowHeight:true,
				pagination:true,
				pageSize:10">
		<thead>
			<tr>
				<th data-defs="field:'id',width:80">ID</th>
				<th data-defs="field:'date',width:80">日期</th>
				<th data-defs="field:'name',width:180">文本</th>
				<th data-defs="field:'price',width:80">文字右对齐</th>
				<th data-defs="field:'remark',width:180">备注</th>
			</tr>
		</thead>
	</table>
</div>
<script>
	function getData() {
	    var rows = [];
	    for ( var i = 1; i <= 800; i++) {
		    var amount = Math.floor(Math.random() * 1000);
		    var price = Math.floor(Math.random() * 1000);
		    rows.push({
		        id : 'ID_' + i,
		        date : $.fn.datebox.defaults.formatter(new Date()),
		        name : '名称 ' + i,
		        price : price,
		        remark : '备注_ ' + i
		    });
	    }
	    return rows;
    }

    function pagerFilter(data) {
	    if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array
		    data = {
		        total : data.length,
		        rows : data
		    }
	    }
	    var dg = $(this);
	    var opts = dg.grid('defs');
	    var pager = dg.grid('getPager');
	    pager.pagination({
		    onSelectPage : function(pageNum, pageSize) {
			    opts.pageNumber = pageNum;
			    opts.pageSize = pageSize;
			    pager.pagination('refresh', {
			        pageNumber : pageNum,
			        pageSize : pageSize
			    });
			    dg.grid('loadData', data);
		    }
	    });
	    if (!data.originalRows) {
		    data.originalRows = (data.rows);
	    }
	    var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
	    var end = start + parseInt(opts.pageSize);
	    data.rows = (data.originalRows.slice(start, end));
	    return data;
    }

    $(function() {
	    $('#dg_clientpagination').grid({
		    loadFilter : pagerFilter
	    }).grid('loadData', getData());
    });
</script>
